M
MLOG
முற்போக்கு வலைச் செயலி கட்டமைப்பு: ஜாவாஸ்கிரிப்ட் சர்வீஸ் வொர்க்கர் பேட்டர்ன்கள் | MLOG | MLOG

4. நெட்வொர்க்-மட்டும் (Network-Only)

நெட்வொர்க்-மட்டும் உத்தி எப்போதும் நெட்வொர்க்கில் இருந்து சொத்துக்களைப் பெறுகிறது, கேச்சை முழுவதுமாகத் தவிர்க்கிறது. ஒரு ஆதாரத்தின் சமீபத்திய பதிப்பு உங்களுக்கு முற்றிலும் தேவைப்படும்போதும், கேச்சிங் விரும்பப்படாதபோதும் இந்த உத்தி பயன்படுத்தப்படுகிறது.

எடுத்துக்காட்டு: 

            
self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request)
  );
});

5. ஸ்டேல்-வைல்-ரீவாலிடேட் (Stale-While-Revalidate)

ஸ்டேல்-வைல்-ரீவாலிடேட் உத்தி, கேச் செய்யப்பட்ட சொத்தை உடனடியாக வழங்குகிறது, அதே நேரத்தில் நெட்வொர்க்கில் இருந்து சமீபத்திய பதிப்பை பெறுகிறது. நெட்வொர்க் கோரிக்கை முடிந்ததும், கேச் புதிய பதிப்புடன் புதுப்பிக்கப்படும். இந்த உத்தி ஒரு வேகமான ஆரம்ப பதிலை வழங்குகிறது, அதே நேரத்தில் பயனர் இறுதியில் மிகவும் புதுப்பித்த உள்ளடக்கத்தைப் பெறுவதை உறுதி செய்கிறது. இது முழுமையான புத்துணர்ச்சியை விட வேகத்தை விரும்பும் முக்கியமற்ற உள்ளடக்கத்திற்கு ஒரு பயனுள்ள உத்தியாகும்.

எடுத்துக்காட்டு: 

            
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        const fetchPromise = fetch(event.request).then(networkResponse => {
          caches.open('my-cache').then(cache => {
            cache.put(event.request, networkResponse.clone());
            return networkResponse;
          });
        });
        return response || fetchPromise;
      })
  );
});

6. கேச், பிறகு நெட்வொர்க் (Cache, then Network)

ஸ்டேல்-வைல்-ரீவாலிடேட் போன்றது, ஆனால் கேச் செய்யப்பட்ட சொத்தை உடனடியாக திருப்பியனுப்பாமல். இது முதலில் கேச்சை சரிபார்க்கிறது, சொத்து இருந்தால் மட்டுமே கேச்சை புதுப்பிக்க பின்னணியில் நெட்வொர்க் கோரிக்கை தொடரும்.

சரியான கேச்சிங் உத்தியைத் தேர்ந்தெடுத்தல்

உகந்த கேச்சிங் உத்தி உங்கள் செயலியின் குறிப்பிட்ட தேவைகளைப் பொறுத்தது. பின்வரும் காரணிகளைக் கருத்தில் கொள்ளுங்கள்:

பொருத்தமான கேச்சிங் உத்திகளை கவனமாகத் தேர்ந்தெடுப்பதன் மூலம், ஆஃப்லைன் சூழல்களிலும் உங்கள் PWA-வின் செயல்திறன் மற்றும் பயனர் அனுபவத்தை கணிசமாக மேம்படுத்தலாம். வொர்க்பாக்ஸ் ([https://developers.google.com/web/tools/workbox](https://developers.google.com/web/tools/workbox)) போன்ற கருவிகள் இந்த உத்திகளை செயல்படுத்துவதை எளிதாக்கும்.

பின்னணி ஒத்திசைவு: ஆஃப்லைன் மாற்றங்களைக் கையாளுதல்

பயனர் ஆஃப்லைனில் இருக்கும்போதும், பின்னணி ஒத்திசைவு உங்கள் PWA-வை பின்னணியில் பணிகளைச் செய்ய அனுமதிக்கிறது. படிவங்களைச் சமர்ப்பித்தல், தரவுப் புதுப்பிப்புகள் மற்றும் நெட்வொர்க் இணைப்பு தேவைப்படும் பிற செயல்பாடுகளைக் கையாள்வதற்கு இது மிகவும் பயனுள்ளதாக இருக்கும். `BackgroundSyncManager` API, நெட்வொர்க் கிடைக்கும்போது செயல்படுத்தப்படும் பணிகளைப் பதிவுசெய்ய உங்களை அனுமதிக்கிறது.

பின்னணி ஒத்திசைவுப் பணியைப் பதிவு செய்தல்

ஒரு பின்னணி ஒத்திசைவுப் பணியைப் பதிவு செய்ய, நீங்கள் `BackgroundSyncManager`-இன் `register` முறையைப் பயன்படுத்த வேண்டும். இந்த முறை ஒரு தனிப்பட்ட டேக் பெயரை ஒரு வாதமாக எடுத்துக்கொள்கிறது. டேக் பெயர் செய்யப்பட வேண்டிய குறிப்பிட்ட பணியை அடையாளம் காட்டுகிறது.

எடுத்துக்காட்டு:

            
self.addEventListener('sync', event => {
  if (event.tag === 'my-sync-task') {
    event.waitUntil(doSomeWork());
  }
});

ஒத்திசைவு நிகழ்வைக் கையாளுதல்

பிரவுசர் நெட்வொர்க் இணைப்பைக் கண்டறியும்போது, அது சர்வீஸ் வொர்க்கருக்கு ஒரு `sync` நிகழ்வை அனுப்புகிறது. நீங்கள் இந்த நிகழ்வுக்குச் செவிமடுத்து, சேவையகத்திற்கு தரவை அனுப்புவது போன்ற தேவையான செயல்களைச் செய்யலாம்.

எடுத்துக்காட்டு:

            
async function doSomeWork() {
  // Retrieve data from IndexedDB
  const data = await getDataFromIndexedDB();

  // Send data to the server
  try {
    const response = await fetch('/api/sync', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json'
      }
    });

    if (response.ok) {
      // Clear the data from IndexedDB
      await clearDataFromIndexedDB();
    } else {
      // Handle errors
      console.error('Sync failed:', response.status);
      throw new Error('Sync failed');
    }
  } catch (error) {
    // Handle network errors
    console.error('Network error:', error);
    throw error;
  }
}

எடுத்துக்காட்டு: ஆஃப்லைன் படிவம் சமர்ப்பிப்பு

ஒரு பயனர் ஆஃப்லைனில் இருக்கும்போது ஒரு படிவத்தை நிரப்பும் ஒரு சூழ்நிலையை கற்பனை செய்து பாருங்கள். சர்வீஸ் வொர்க்கர் படிவத் தரவை IndexedDB-இல் சேமித்து, ஒரு பின்னணி ஒத்திசைவுப் பணியைப் பதிவு செய்யலாம். நெட்வொர்க் கிடைக்கும்போது, சர்வீஸ் வொர்க்கர் IndexedDB-இலிருந்து படிவத் தரவை மீட்டெடுத்து சேவையகத்தில் சமர்ப்பிக்கும்.

  1. பயனர் ஆஃப்லைனில் இருக்கும்போது படிவத்தை நிரப்பி சமர்ப்பிக்கிறார்.
  2. படிவத் தரவு IndexedDB-இல் சேமிக்கப்படுகிறது.
  3. ஒரு தனித்துவமான டேக்குடன் (எ.கா., `form-submission`) ஒரு பின்னணி ஒத்திசைவுப் பணி பதிவு செய்யப்படுகிறது.
  4. நெட்வொர்க் கிடைக்கும்போது, `sync` நிகழ்வு தூண்டப்படுகிறது.
  5. சர்வீஸ் வொர்க்கர் IndexedDB-இலிருந்து படிவத் தரவை மீட்டெடுத்து சேவையகத்தில் சமர்ப்பிக்கிறது.
  6. சமர்ப்பிப்பு வெற்றிகரமாக இருந்தால், படிவத் தரவு IndexedDB-இலிருந்து அகற்றப்படும்.

புஷ் அறிவிப்புகள்: சரியான நேரத்தில் புதுப்பிப்புகளுடன் பயனர்களை ஈடுபடுத்துதல்

புஷ் அறிவிப்புகள், உங்கள் PWA செயலி பிரவுசரில் செயலில் இயங்காத போதும், பயனர்களுக்கு சரியான நேரத்தில் புதுப்பிப்புகளையும் செய்திகளையும் அனுப்ப உதவுகிறது. இது பயனர் ஈடுபாடு மற்றும் தக்கவைப்பை கணிசமாக மேம்படுத்தும். புஷ் அறிவிப்புகளை வழங்க Push API மற்றும் Notifications API ஆகியவை இணைந்து செயல்படுகின்றன.

புஷ் அறிவிப்புகளுக்கு சந்தா செலுத்துதல்

புஷ் அறிவிப்புகளைப் பெற, பயனர்கள் முதலில் உங்கள் PWA-விற்கு அனுமதி வழங்க வேண்டும். பயனர்களை புஷ் அறிவிப்புகளுக்கு சந்தா செலுத்தச் செய்ய `PushManager` API-ஐப் பயன்படுத்தலாம்.

எடுத்துக்காட்டு:

            
navigator.serviceWorker.ready.then(registration => {
  registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: 'YOUR_PUBLIC_VAPID_KEY'
  })
  .then(subscription => {
    // Send subscription details to your server
    sendSubscriptionToServer(subscription);
  })
  .catch(error => {
    console.error('Failed to subscribe:', error);
  });
});

முக்கியம்: `YOUR_PUBLIC_VAPID_KEY` என்பதை உங்கள் உண்மையான VAPID (Voluntary Application Server Identification) கீயுடன் மாற்றவும். VAPID கீகள் உங்கள் பயன்பாட்டு சேவையகத்தை அடையாளம் காணவும், புஷ் அறிவிப்புகள் பாதுகாப்பாக அனுப்பப்படுவதை உறுதி செய்யவும் பயன்படுத்தப்படுகின்றன.

புஷ் அறிவிப்புகளைக் கையாளுதல்

ஒரு புஷ் அறிவிப்பு பெறப்படும்போது, சர்வீஸ் வொர்க்கர் ஒரு `push` நிகழ்வை அனுப்புகிறது. நீங்கள் இந்த நிகழ்வுக்குச் செவிமடுத்து, பயனருக்கு அறிவிப்பைக் காட்டலாம்.

எடுத்துக்காட்டு:

            
self.addEventListener('push', event => {
  const payload = event.data ? event.data.text() : 'No payload';

  event.waitUntil(
    self.registration.showNotification('My PWA', {
      body: payload,
      icon: 'icon.png'
    })
  );
});

புஷ் அறிவிப்புகளைத் தனிப்பயனாக்குதல்

Notifications API, புஷ் அறிவிப்புகளின் தோற்றம் மற்றும் நடத்தையைத் தனிப்பயனாக்க உங்களை அனுமதிக்கிறது. நீங்கள் தலைப்பு, உள்ளடக்கம், ஐகான், பேட்ஜ் மற்றும் பிற விருப்பங்களைக் குறிப்பிடலாம்.

எடுத்துக்காட்டு:

            
self.addEventListener('push', event => {
  const data = event.data.json();
  const title = data.title || 'My PWA';
  const options = {
    body: data.body || 'No message',
    icon: data.icon || 'icon.png',
    badge: data.badge || 'badge.png',
    vibrate: [200, 100, 200],
    data: { // Custom data that you can access when the user clicks the notification
      url: data.url || '/'
    },
    actions: [
      {action: 'explore', title: 'Explore this new world',
        icon: 'images/checkmark.png'},
      {action: 'close', title: 'Close',
        icon: 'images/xmark.png'},
    ]
  };

  event.waitUntil(self.registration.showNotification(title, options));
});


self.addEventListener('notificationclick', function(event) {
  event.notification.close();

  // Check if the user clicked on an action.
  if (event.action === 'explore') {
    clients.openWindow(event.notification.data.url);
  } else {
    // Default action: open the app.
    clients.openWindow('/');
  }
});

எடுத்துக்காட்டு: செய்தி எச்சரிக்கை

ஒரு செய்தி பயன்பாடு, பயனர்களுக்கு முக்கிய செய்திகளைப் பற்றி எச்சரிக்க புஷ் அறிவிப்புகளைப் பயன்படுத்தலாம். ஒரு புதிய கட்டுரை வெளியிடப்படும்போது, சேவையகம் பயனரின் சாதனத்திற்கு ஒரு புஷ் அறிவிப்பை அனுப்புகிறது, இது கட்டுரையின் ஒரு சிறு சுருக்கத்தைக் காட்டுகிறது. பயனர் பின்னர் அறிவிப்பைக் கிளிக் செய்து முழு கட்டுரையையும் PWA-இல் திறக்கலாம்.

மேம்பட்ட சர்வீஸ் வொர்க்கர் பேட்டர்ன்கள்

1. ஆஃப்லைன் பகுப்பாய்வு (Offline Analytics)

பயனர்கள் ஆஃப்லைனில் இருக்கும்போதும் அவர்களின் நடத்தையைக் கண்காணிக்க, பகுப்பாய்வுத் தரவை உள்ளூரில் சேமித்து, நெட்வொர்க் கிடைக்கும்போது சேவையகத்திற்கு அனுப்பவும். இதை IndexedDB மற்றும் பின்னணி ஒத்திசைவைப் பயன்படுத்தி அடையலாம்.

2. பதிப்பிடுதல் மற்றும் புதுப்பித்தல் (Versioning and Updating)

உங்கள் சர்வீஸ் வொர்க்கருக்கு ஒரு வலுவான பதிப்பு உத்தியைச் செயல்படுத்தவும், இதனால் பயனர்கள் தங்கள் அனுபவத்திற்கு இடையூறு விளைவிக்காமல் எப்போதும் சமீபத்திய புதுப்பிப்புகளைப் பெறுவதை உறுதிசெய்யவும். பழைய கேச் செய்யப்பட்ட சொத்துக்களை செல்லாததாக்க கேச் பஸ்டிங் நுட்பங்களைப் பயன்படுத்தவும்.

3. மாடுலர் சர்வீஸ் வொர்க்கர்கள் (Modular Service Workers)

பராமரிப்பு மற்றும் வாசிப்புத் திறனை மேம்படுத்த உங்கள் சர்வீஸ் வொர்க்கர் குறியீட்டை மாட்யூல்களாக ஒழுங்கமைக்கவும். ஜாவாஸ்கிரிப்ட் மாட்யூல்கள் (ESM) அல்லது வெப்பேக் அல்லது ரோல்அப் போன்ற ஒரு மாட்யூல் பண்ட்லரைப் பயன்படுத்தவும்.

4. டைனமிக் கேச்சிங் (Dynamic Caching)

பயனர் தொடர்புகள் மற்றும் பயன்பாட்டு முறைகளின் அடிப்படையில் சொத்துக்களை டைனமிக்காக கேச் செய்யவும். இது கேச் அளவை மேம்படுத்தவும் செயல்திறனை அதிகரிக்கவும் உதவும்.

சர்வீஸ் வொர்க்கர் மேம்பாட்டிற்கான சிறந்த நடைமுறைகள்

முடிவுரை

ஜாவாஸ்கிரிப்ட் சர்வீஸ் வொர்க்கர்கள் வலுவான, செயல்திறன் மிக்க மற்றும் ஈடுபாடுடைய PWAs-ஐ உருவாக்குவதற்கான சக்திவாய்ந்த கருவிகள். சர்வீஸ் வொர்க்கர் வாழ்க்கைச் சுழற்சியைப் புரிந்துகொண்டு, பொருத்தமான கேச்சிங் உத்திகள், பின்னணி ஒத்திசைவு மற்றும் புஷ் அறிவிப்புகளைச் செயல்படுத்துவதன் மூலம், ஆஃப்லைன் சூழல்களிலும் கூட நீங்கள் விதிவிலக்கான பயனர் அனுபவங்களை உருவாக்க முடியும். இந்தக் கட்டுரை உலகளாவிய பார்வையாளர்களுக்காக வெற்றிகரமான PWAs-ஐ உருவாக்குவதில் உங்களுக்கு வழிகாட்டுவதற்கான முக்கிய சர்வீஸ் வொர்க்கர் பேட்டர்ன்கள் மற்றும் சிறந்த நடைமுறைகளை ஆராய்ந்துள்ளது. வலை தொடர்ந்து विकसितப்பட்டு வரும் நிலையில், வலை மேம்பாட்டின் எதிர்காலத்தை வடிவமைப்பதில் சர்வீஸ் வொர்க்கர்கள் பெருகிய முறையில் முக்கிய பங்கு வகிக்கும்.

உங்கள் குறிப்பிட்ட பயன்பாட்டுத் தேவைகளுக்கு இந்த பேட்டர்ன்களை மாற்றியமைக்க நினைவில் கொள்ளுங்கள், எப்போதும் பயனர் அனுபவத்திற்கு முன்னுரிமை அளியுங்கள். சர்வீஸ் வொர்க்கர்களின் சக்தியை ஏற்றுக்கொள்வதன் மூலம், பயனரின் இருப்பிடம் அல்லது நெட்வொர்க் இணைப்பைப் பொருட்படுத்தாமல், செயல்படுவது மட்டுமல்லாமல், பயன்படுத்துவதற்கும் மகிழ்ச்சியாக இருக்கும் PWAs-ஐ நீங்கள் உருவாக்க முடியும்.

மேலும் ஆதாரங்கள்: